<!DOCTYPE html>
<html>
<head>
    <!-- 原有的 head 内容保持不变 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="Mobirise v5.2.0, mobirise.com">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="shortcut icon" href="https://img.picgo.net/2024/10/18/frame-1-121x121bc5d878c1dd0d5fc.png"
          onerror="this.onerror=null;this.src='./assets/images/frame-1-121x121.png';"
          type="image/x-icon">

    <link rel="stylesheet" href="../assets/web/assets/mobirise-icons2/mobirise2.css">
    <link rel="stylesheet" href="../assets/tether/tether.min.css">
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="../assets/dropdown/css/style.css">
    <link rel="stylesheet" href="../assets/socicon/css/styles.css">
    <link rel="stylesheet" href="../assets/theme/css/style.css">
    <link rel="preload" as="style" href="../assets/mobirise/css/mbr-additional.css">
    <link rel="stylesheet" href="../assets/mobirise/css/mbr-additional.css" type="text/css">

    <!--added by Yuki 20221002-->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image:src" content="assets/images/index-meta.jpg">
    <meta property="og:image" content="assets/images/index-meta.jpg">
    <meta name="twitter:title" content="Phantoms">

    <link rel="stylesheet" href="../additions/mouse.css">
    <!--added by Yuki 20221002-->

    <!-- 添加 test.html 的样式 -->
    <style>
        /* test.html 的样式 */
        .member-container {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
        .member-inner-container {
            width: 90%;
            max-width: 1200px;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        .member-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }
        .member-card {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            width: calc(25% - 20px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .member-card:hover {
            transform: scale(1.02);
        }
        .member-card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 10px;
            object-fit: cover;
            display: block; /* 新增 */
            margin-left: auto; /* 新增 */
            margin-right: auto; /* 新增 */
        }
        .member-card h2 {
            font-size: 1.2em;
            margin: 0 0 5px;
            color: #555;
        }
        .member-card p {
            font-size: 0.9em;
            color: #777;
            margin: 0 0 10px;
        }
        .member-card .last-dynamic {
            font-size: 0.8em;
            color: #999;
        }
        .member-card.no-avatar {
            background: #f0f0f0;
        }
        .member-card.no-avatar img {
            border: 2px solid #ddd;
        }

        /* 更新后的弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }
        .modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 0;
            border-radius: 12px;
            width: 85%;
            max-width: 800px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            animation: modalFadeIn 0.3s ease-out;
        }
        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(-50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .modal-header {
            background: linear-gradient(135deg, #282828 0%, #343434 100%);
            color: white;
            padding: 20px 30px;
            position: relative;
        }
        .modal-title {
            font-size: 1.8em;
            margin: 0;
            font-weight: 600;
        }
        .close {
            color: white;
            font-size: 28px;
            font-weight: bold;
            position: absolute;
            right: 20px;
            top: 15px;
            cursor: pointer;
            transition: color 0.2s;
        }
        .close:hover,
        .close:focus {
            color: #ffffff;
            text-decoration: none;
        }
        .modal-body {
            padding: 30px;
            max-height: 70vh;
            overflow-y: auto;
        }
        .info-section {
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .info-section:last-child {
            border-bottom: none;
        }
        .info-section h3 {
            font-size: 1.3em;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #a1a1a1;
            display: inline-block;
        }
        .info-item {
            display: flex;
            margin-bottom: 12px;
            align-items: flex-start;
        }
        .info-label {
            font-weight: 600;
            color: #555;
            min-width: 120px;
            margin-right: 15px;
        }
        .info-value {
            color: #333;
            flex: 1;
        }
        .achievement-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
            margin-top: 10px;
        }
        .achievement-item {
            background: #f8f9fa;
            border-left: 4px solid #2f2f2f;
            padding: 12px 15px;
            border-radius: 4px;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .achievement-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .achievement-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .achievement-detail {
            color: #666;
            font-size: 0.9em;
            margin-bottom: 5px;
        }
        .achievement-time {
            color: #888;
            font-size: 0.8em;
            text-align: right;
        }
        .career-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        .career-item {
            background: #ececec;
            border: 1px solid #dedede;
            border-radius: 6px;
            padding: 8px 10px;
            text-align: center;
            font-size: 0.9em;
        }
        .career-level {
            font-weight: 600;
            color: #313131;
        }
        .loading {
            text-align: center;
            padding: 40px;
            font-size: 1.2em;
            color: #777;
        }
        .no-data {
            color: #999;
            font-style: italic;
            text-align: center;
            padding: 20px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                margin: 10% auto;
            }
            .modal-body {
                padding: 20px;
            }
            .achievement-list {
                grid-template-columns: 1fr;
            }
            .career-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
            .info-item {
                flex-direction: column;
            }
            .info-label {
                margin-bottom: 5px;
            }
        }
    </style>
</head>
<body>

<div id="menu"></div>
<script src="../assets/web/assets/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#menu").load("../additions/menu/menu2.html", function() {
            adjustLinks();
            window.addEventListener('resize', adjustLinks);
        });
    });
</script>

<!--plugin began-->
<section class="header1 cid-s48MCQYojq mbr-fullscreen" id="header1-f">
    <div class="mbr-overlay" style="opacity:1; background-color: #f4f4f4;"></div>
    <div class="align-center container-fluid">
        <!-- 替换为 test.html 的内容 -->
        <div class="member-container">
            <div class="member-inner-container">
                <div class="member-list" id="memberList">
                    <!-- Member cards will be inserted here by JavaScript -->
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div id="myModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">成员详情</h2>
                    <span class="close">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="info-section">
                        <h3>基本信息</h3>
                        <div class="info-item">
                            <span class="info-label">角色名:</span>
                            <span class="info-value" id="modalCharacterName">-</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">服务器:</span>
                            <span class="info-value" id="modalServer">-</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">部队:</span>
                            <span class="info-value" id="modalGuild">-</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">签名:</span>
                            <span class="info-value" id="modalProfile">-</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">最后登录:</span>
                            <span class="info-value" id="modalLastLogin">-</span>
                        </div>
                    </div>

                    <div class="info-section">
                        <h3>职业等级</h3>
                        <div class="career-grid" id="modalCareers">
                            <!-- 职业信息将通过JS动态添加 -->
                        </div>
                    </div>

                    <div class="info-section">
                        <h3>成就</h3>
                        <div class="achievement-list" id="modalAchievements">
                            <!-- 成就信息将通过JS动态添加 -->
                        </div>
                    </div>

                    <div class="loading" id="loadingMessage">加载中...</div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="container">
    <div class="row justify-content-center" style="opacity:1; background-color: rgb(255, 255, 255);">
        <div class="col-12 col-lg-10">
            <div class="image-wrapper">
                <p class="mbr-description mbr-fonts-style mt-2 align-center display-4"><b>数据来源[risingstones] 版权归原站点所有 如有侵权请立即与我们联系 我们将及时处理<b></p>
            </div>
        </div>
    </div>
</div>
<!--plugin end-->

<!-- 原有的其他内容保持不变 -->
<section class="footer7 cid-seeJHoNSny" once="footers" id="footer7-p">
    <div class="container">
        <div class="media-container-row align-center mbr-white">
            <div class="col-12">
                <p class="mbr-text mb-0 mbr-fonts-style display-7">Copyright (C) SQUARE ENIX CO., LTD. All Rights Reserved.<br>Copyright&nbsp;(C) Crystal Alliance cir. All Rights Reserved.
                </p>
            </div>
        </div>
    </div>
</section>

<section style="background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; color:#aaa; font-size:12px; padding: 0; align-items: center; display: flex;"><a href="https://mobirise.site/n" style="flex: 1 1; height: 3rem; padding-left: 1rem;"></a><p style="flex: 0 0 auto; margin:0; padding-right:1rem;">Page was <a href="https://mobirise.site/g" style="color:#aaa;">designed</a> with Mobirise</p></section>

<script src="../assets/web/assets/jquery/jquery.min.js"></script>
<script src="../assets/popper/popper.min.js"></script>
<script src="../assets/tether/tether.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/smoothscroll/smooth-scroll.js"></script>
<script src="../assets/ytplayer/jquery.mb.ytplayer.min.js"></script>
<script src="../assets/vimeoplayer/jquery.mb.vimeo_player.js"></script>
<script src="../assets/dropdown/js/nav-dropdown.js"></script>
<script src="../assets/dropdown/js/navbar-dropdown.js"></script>
<script src="../assets/touchswipe/jquery.touch-swipe.min.js"></script>
<script src="../assets/theme/js/script.js"></script>

<!-- 更新后的 JavaScript 代码 -->
<script>
    // test.html 的 JavaScript 代码
    const imageProxyUrl = 'https://res.cloudinary.com/your-cloud-name/image/fetch/';
    const defaultAvatar = '../assets/images/def-profile-gray.png';

    function fallbackToDefault(imgElement) {
        imgElement.src = defaultAvatar;
    }

    function createMemberCard(member) {
        const card = document.createElement('div');
        card.className = 'member-card';
        card.dataset.uuid = member.uuid;

        if (!member.avatar) {
            card.classList.add('no-avatar');
        }

        const avatar = document.createElement('img');
        avatar.src = member.avatar ? imageProxyUrl + encodeURIComponent(member.avatar) : defaultAvatar;
        avatar.alt = 'Avatar';
        avatar.onerror = () => fallbackToDefault(avatar);
        card.appendChild(avatar);

        const name = document.createElement('h2');
        name.textContent = member.character_name || 'N/A';
        card.appendChild(name);

        const profile = document.createElement('p');
        profile.textContent = member.profile || 'No profile';
        card.appendChild(profile);

        const lastDynamic = document.createElement('div');
        lastDynamic.className = 'last-dynamic';
        lastDynamic.textContent = member.last_dynamic || 'No recent activity';
        card.appendChild(lastDynamic);

        card.addEventListener('click', () => {
            showModal();
            fetchUserInfo(member.uuid);
        });

        return card;
    }

    async function fetchUserInfo(uuid) {
        try {
            const response = await fetch(`https://phantoms-backend.onrender.com/api/risingstones/user-info?uuid=${uuid}`);
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            const data = await response.json();
            displayUserInfo(data.data);
        } catch (error) {
            console.error('There has been a problem with your fetch operation:', error);
            displayError('加载用户信息失败。');
        }
    }

    function displayUserInfo(userInfo) {
        // const modalTitle = document.querySelector('.modal-title');
        // const modalProfile = document.getElementById('modalProfile');
        // const modalLastDynamic = document.getElementById('modalLastDynamic');
        // const modalAchievements = document.getElementById('modalAchievements');
        const loadingMessage = document.getElementById('loadingMessage');

        // 基本信息
        document.getElementById('modalCharacterName').textContent = userInfo.character_name || '-';
        document.getElementById('modalServer').textContent = `${userInfo.area_name || '-'} - ${userInfo.group_name || '-'}`;
        document.getElementById('modalGuild').textContent = userInfo.characterDetail?.[0]?.guild_name || '-';
        document.getElementById('modalProfile').textContent = userInfo.profile || '-';
        document.getElementById('modalLastLogin').textContent = userInfo.characterDetail?.[0]?.last_login_time || '-';

        // 职业信息
        const careersContainer = document.getElementById('modalCareers');
        careersContainer.innerHTML = '';

        if (userInfo.careerLevel && userInfo.careerLevel.length > 0) {
            userInfo.careerLevel.forEach(career => {
                const careerItem = document.createElement('div');
                careerItem.className = 'career-item';
                careerItem.innerHTML = `
                    <div>${career.career}</div>
                    <div class="career-level">Lv.${career.character_level}</div>
                `;
                careersContainer.appendChild(careerItem);
            });
        } else {
            careersContainer.innerHTML = '<div class="no-data">暂无职业信息</div>';
        }

        // 成就信息
        const achievementsContainer = document.getElementById('modalAchievements');
        achievementsContainer.innerHTML = '';

        if (userInfo.achieveInfo && userInfo.achieveInfo.length > 0) {
            // 只显示最近的10个成就
            const recentAchievements = userInfo.achieveInfo.slice(0, 10);

            recentAchievements.forEach(achievement => {
                const achievementItem = document.createElement('div');
                achievementItem.className = 'achievement-item';
                achievementItem.innerHTML = `
                    <div class="achievement-name">${achievement.achieve_name}</div>
                    <div class="achievement-detail">${achievement.achieve_detail}</div>
                    <div class="achievement-time">${formatDate(achievement.achieve_time)}</div>
                `;
                achievementsContainer.appendChild(achievementItem);
            });

            // 如果成就超过10个，显示提示
            if (userInfo.achieveInfo.length > 10) {
                const moreItem = document.createElement('div');
                moreItem.className = 'achievement-item';
                moreItem.innerHTML = `
                    <div class="achievement-name">还有 ${userInfo.achieveInfo.length - 10} 个成就...</div>
                    <div class="achievement-detail">查看更多成就请访问石之家社区</div>
                `;
                achievementsContainer.appendChild(moreItem);
            }
        } else {
            achievementsContainer.innerHTML = '<div class="no-data">暂无成就信息</div>';
        }

        loadingMessage.style.display = 'none';
    }

    function formatDate(dateString) {
        if (!dateString) return '-';
        const date = new Date(dateString);
        return date.toLocaleDateString('zh-CN');
    }

    function displayError(message) {
        const modalTitle = document.querySelector('.modal-title');
        const loadingMessage = document.getElementById('loadingMessage');

        modalTitle.textContent = 'Error';
        loadingMessage.textContent = message;
        loadingMessage.style.display = 'block';
    }

    function showModal() {
        const modal = document.getElementById('myModal');
        const loadingMessage = document.getElementById('loadingMessage');

        // 重置内容
        document.getElementById('modalCharacterName').textContent = '-';
        document.getElementById('modalServer').textContent = '-';
        document.getElementById('modalGuild').textContent = '-';
        document.getElementById('modalProfile').textContent = '-';
        document.getElementById('modalLastLogin').textContent = '-';
        document.getElementById('modalCareers').innerHTML = '';
        document.getElementById('modalAchievements').innerHTML = '';

        loadingMessage.style.display = 'block';
        modal.style.display = 'block';
    }

    function hideModal() {
        const modal = document.getElementById('myModal');
        modal.style.display = 'none';
    }

    function populateMemberList(data) {
        const memberList = document.getElementById('memberList');
        const allMembers = data.registered.concat(data.unRegister);

        allMembers.forEach(member => {
            const card = createMemberCard(member);
            memberList.appendChild(card);
        });
    }

    async function fetchData() {
        try {
            const response = await fetch('https://phantoms-backend.onrender.com/api/risingstones/guild-member');
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            const data = await response.json();
            populateMemberList(data.data);
        } catch (error) {
            console.error('There has been a problem with your fetch operation:', error);
        }
    }

    document.addEventListener('DOMContentLoaded', fetchData);

    const modal = document.getElementById('myModal');
    const span = document.getElementsByClassName('close')[0];

    span.onclick = hideModal;
    window.onclick = function(event) {
        if (event.target == modal) {
            hideModal();
        }
    };
</script>

<!-- 原有的 footer 内容 -->
<footer>
    <!-- 回到顶部按钮 -->
    <style>
        .box{
            position:fixed;
            right:20px;
            bottom: 480px;
            height:50px;
            width: 50px;
            text-align:center;
            padding-top:20px;
            background-color: black;
            border-radius: 20%;
            overflow: hidden;
        }.box:hover:before{
             top:50%
         }.box:hover .box-in{
              visibility: hidden;
          }.box:before{
               position: absolute;
               top: -50%;
               left: 50%;
               transform: translate(-50%,-50%);
               content:'TOP';
               width: 40px;
               color:white;
               font-weight:bold;
           }.box-in{
                visibility: visible;
                display:inline-block;
                height:20px;
                width: 20px;
                border: 3px solid black;
                border-color: white transparent transparent white;
                transform:rotate(45deg);
            }
    </style>
    <div id="box" class="box">
        <div class="box-in"></div>
    </div>
    <script>
        var timer  = null;
        box.onclick = function(){
            cancelAnimationFrame(timer);
            timer = requestAnimationFrame(
                function fn(){
                    var oTop = document.body.scrollTop || document.documentElement.scrollTop;
                    if(oTop > 0){
                        document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                        timer = requestAnimationFrame(fn);
                    }
                    else{
                        cancelAnimationFrame(timer);
                    }
                }
            );
        }
    </script>

    <!-- 更改网页标题 -->
    <title>标题</title>
    <script>
        document.title = '(ノ￣▽￣) Phantoms !'
    </script>

    <!-- 网页标题动态改变 -->
    <script>
        window.onload = function () {
            var OriginTitile = document.title;
            var titleTime;
            document.addEventListener('visibilitychange', function () {
                if (document.hidden) {
                    document.title = '( * ￣▽￣)／肿么不看了呢？';
                    clearTimeout(titleTime);
                }
                else {
                    document.title = '(～￣▽￣)～咦！又开始看了！';
                    titleTime = setTimeout(function () {
                        document.title = OriginTitile;
                    }, 2000);
                }
            });
        }
    </script>

    <!-- text click effect -->
    <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function($) {
            $("body").click(function(e) {
                var a = new Array("Astral","Umbral","Arcanum","Polyglot","Transcendent","Material","Original","Xenogeneic","Etheral","Sin" ,"Missionary","Requiem","Clement","Cristal","Zodiac");
                var $i = $("<span></span>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
                });
                $("body").append($i);
                $i.animate({
                        "top": y - 180,
                        "opacity": 0
                    },
                    1500,
                    function() {
                        $i.remove();
                    });
            });
        });
    </script>

    <!-- 引入访客统计模块 -->
    <script src="../visitor-tracker.js"></script>
    <!-- Cloudflare Web Analytics -->
    <script defer src='../lib/cloudflare/beacon.min.js' data-cf-beacon='{"token": "0e55e488041949479a3dace73ef940cd"}'>
    </script>
</footer>

</body>
</html>